<template>
  <div class="view">
    <div class="box" style="height: 100%">
      <el-row class="handle-box">
        <span>{{ $t("wellcon.wellName") }}：</span>
        <el-input
          v-model="filters.wellId"
          @keyup.native.enter="search"
          :placeholder="$t('public.text')"
          clearable
        ></el-input>

        <span>{{ $t("wellcon.blockName") }}：</span>
        <el-select
          v-model="filters.blocksName"
          @change="search"
          filterable
          clearable
          :placeholder="$t('public.select')"
        >
          <el-option
            v-for="item in blockdata"
            :key="item.blockId"
            :label="item.blockName"
            :value="item.blockName"
          >
          </el-option>
        </el-select>

        <el-button
          type="primary"
          class="seacths"
          id="btn"
          @click="search"
          icon="el-icon-search"
          >{{ $t("public.search") }}</el-button
        >
      </el-row>
      <div class="tablebox">
        <template>
          <el-table
            :data="tables"
            @cell-click="jumpurl"
            :cell-style="changeCellStyle"
            size="mini"
            stripe
            class="tablefisbox"
          >
            <el-table-column type="index" :label="$t('public.number')" width="80">
            </el-table-column>
            <el-table-column
              prop="wellId"
              :label="$t('wellcon.wellName')"
              width="200"
              class="well"
            >
            </el-table-column>
            <el-table-column
              prop="tableName"
              :label="$t('wellcon.wellLibrary')"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="operatingCompany"
              :label="$t('wellcon.operatingCompany')"
            >
            </el-table-column>
            <el-table-column
              prop="clients"
              :label="$t('wellcon.clients')"
            >
            </el-table-column>
            <el-table-column prop="blocksName" :label="$t('wellcon.blockName')">
            </el-table-column>
            <el-table-column
              prop="platformName"
              :label="$t('wellcon.platformName')"
              width="200"
            >
            </el-table-column>
            <el-table-column :label="$t('public.operation')" width="400">
              <template>
                <el-button
                  type="warning"
                  icon="el-icon-edit"
                  round
                  size="mini"
                  >{{ $t("public.edit") }}</el-button
                >
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  round
                  size="mini"
                  >{{ $t("wellcon.lithInformation") }}</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  round
                  size="mini"
                  >{{ $t("wellcon.lithDescribe") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!--工具条-->
        <el-col class="pages">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="pageSize"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blockdata: [], //区块数据
      filters: {
        wellId: "",
        blocksName: "",
      },
      tables: [],
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页数
    };
  },
  mounted() {
    this.getWell();
    this.blockSelect();
  },
  watch: {
    "filters.wellId"(val) {
      if (val.trim() === "") {
        this.getWell();
      }
    },
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getWell();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.pageSize = val;
      this.getWell();
    },
    //模糊搜索
    search() {
      this.page = 1;
      this.limit = 10;
      this.pageSize = 1;
      this.getWell();
    },
    //获取井信息
    async getWell() {
      try {
        let params = {
          WellId: this.filters.wellId,
          BlockName: this.filters.blocksName,
          page: this.page,
          limit: this.limit,
        };
        let res = await this.$api.set.getWellInfo(params);
        this.total = res.count;
        this.tables = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    //获取区块名称数据
    async blockSelect() {
      let option = await this.$api.set.blockSelect();
      this.blockdata = option.data;
    },

    //点击指定单元格时跳转页面
    jumpurl(row, column, cell, event) {
      let params = { WellName: row.wellId };
      this.$api.set.copymodel(params);
      if (column.property == "wellId") {
        let routeData = this.$router.resolve({
          path: "/modelmenus",
          query: {
            usid: JSON.parse(this.$store.state.userInfo).uid,
            wellid: row.wellId, //井Id
            wellname: row.tableName, //井库名
            specialty: "录井",
          },
        });
        window.open(routeData.href, "_blank");
      }
    },
    //鼠标滑过指定单元格时修改鼠标状态
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.property == "wellId") {
        return "cursor: pointer;";
      }
    },
  },
};
</script>